    <template>
    	<!-- #ifdef MP-WEIXIN -->
    	<view class="footer" >
    		<view class="footer-center">
    		<textarea class="input-text" @blur="blur" :cursor-spacing='100' :fixed="true"  @confirm="sendMessge" :show-confirm-bar="false" v-model="inputValue" :focus="focus" maxlength="-1"  :placeholder="placeholder"></textarea>
    	</view>
    	<!-- #endif -->
    	<!-- #ifdef H5 -->
    	<view class="footer" v-clickoutside='blur'>
    		<view class="footer-center">
    			<textarea class="input-text"    @confirm="sendMessge"  v-model="inputValue" :focus="focus" maxlength="-1"  :placeholder="placeholder"></textarea>
			</view>
    	<!-- #endif -->
			<button id='msg-type' type="primary" class="send-comment" @tap="sendMessge">发送</button>
    	</view>
    </template>

    <script>
    	const clickoutside = {
    	    // 初始化指令
    	    bind(el, binding, vnode) {
    			
    	        function documentHandler(e) {	    
    	
    	            // 这里判断点击的元素是否是本身，是本身，则返回
    	            if (el.contains(e.target)) {
    					
    	                return false;
    	            }
    	            // 判断指令中是否绑定了函数
    	            if (binding.expression) {
    	                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
    	                binding.value(e);
    	            }
    	        }
    	        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    	        el.__vueClickOutside__ = documentHandler;
    	        document.addEventListener('click', documentHandler);
    			
    	    },
    	    update() {},
    	    unbind(el, binding) {
    	        // 解除事件监听
    	        document.removeEventListener('click', el.__vueClickOutside__);
    	        delete el.__vueClickOutside__;
    	    },
    	};
    	export default {
    		name: "chat-input",
    		data() {
    			return {
    				inputValue: '',
    				isShow:false
    			}
    		},
    		props:{
    			placeholder: {
    				type: String,
    				required: true
    			},
    			focus: {
    				type:Boolean,
    				required: true
    			},
    			show:{
    				type:Boolean,
    				required:true
    			}
    		},
    		watch:{
    			show:function(newVal,oldVal){
    			
    				this.isShow=newVal
    			}			
    		},
    		
    		directives: {clickoutside},
    	
    		
    		methods: {
    			blur: function() {//失焦触发通知父组件	
				
				
    			// #ifdef  MP-WEIXIN
				if( this.isShow){
					this.isShow=!this.isShow;
				}
    			// #endif	
    				
    				if(!this.isShow){
    				this.$emit('blur')
    				}
    				else{
    					 this.isShow=!this.isShow;
    				}
    			},		
    				
    			sendMessge: function (e) {
    				if (!this.inputValue) {
						uni.showToast({
						    title: '还没有输入内容哦!',
							icon: 'none',
						    duration: 2000
						})
    					return;
    				}
    				var that = this;
    				//点击发送按钮时，通知父组件用户输入的内容
    				this.$emit('send-message', {
    					type: 'text',
    					content: that.inputValue
    				});
    				that.inputValue = '';//清空上次输入的内容
    			}
    			
    		}
    	}
    </script>

    <style lang="scss">
    	.footer {
    		display: flex;
    		width: 100vw;		
    		min-height: 200rpx;
    		border-top: solid 1px #bbb;
    		overflow: hidden;
    		padding: 5upx;
    		background-color: #F4F5F6;
    		overflow-y: hidden;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
    	}
    	.footer-center {
    		padding-left: 20upx;
    		width: 80%;
    		height: 200rpx;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		flex-grow: 0;
    		flex-shrink: 0;
    	}
    	.footer-center .input-text {
    		background: #fff;
    		padding: 10upx !important;
    		font-family: verdana !important;
    		overflow: hidden;
    		border-radius: 15upx;
    		height: 80%;
    		width: 100%;
    	}
		.send-comment{
			width: 14vw;
			height: 8vw;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
    </style>